<template>
	<view class="editInfo">
		<view class="editInfo-form">
			<uv-form labelPosition="left" :model="userForm" ref="form">
				<uv-form-item label="昵称" prop="nick_name" borderBottom>
					<uv-input v-model="userForm.nick_name" border="none" inputAlign="right">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="头像" borderBottom labelWidth="100">
					<view class="avatar-button" @tap="ChooseAvatar">
						<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
							style="padding:0;max-width:50px;max-height:50px;">
					
							<image :src="userForm.avatar" style="max-width:50px;max-height:50px;"></image>
						</button>
					</view>
				</uv-form-item>

				<uv-form-item label="性别" prop="gender" borderBottom @click="()=>{
						$refs.genderPicker.open()
					}">
					<uv-picker ref="genderPicker" :columns="genderList" @confirm="PickerGender"></uv-picker>
					<uv-input v-model="userForm.gender" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
						inputAlign="right">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<uv-form-item label="出生日期" labelWidth="100" prop="userInfo.birthday" borderBottom @click="()=>{
						$refs.datetimePicker.open()
					}">
					<uv-datetime-picker ref="datetimePicker" v-model="dateValue" mode="date" @confirm="birthdayChange"
						:minDate="631123200000" :maxDate="1577808000000">
					</uv-datetime-picker>
					<uv-input v-model="userForm.birthday" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
						inputAlign="right">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item label="所在地区" labelWidth="100" prop="userInfo.region" borderBottom>
					<pick-regions :defaultRegion="userForm.region" @getRegion="handleGetRegion" ref="pickRegionsRef" >
						<uv-text :lines="1" :text="userForm.regionName"></uv-text>
					</pick-regions>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item label="身高" prop="userInfo.height" borderBottom>
					<uv-input placeholder="请输您的身高" border="none" v-model="userForm.height" type="number" inputAlign="right">
						<template v-slot:suffix>
							<text>cm</text>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="体重" prop="userInfo.weight" borderBottom>
					<uv-input placeholder="请输您的体重" border="none" v-model="userForm.weight" type="number" inputAlign="right">
						<template v-slot:suffix>
							<text>kg</text>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="学历" prop="userInfo.degree" borderBottom @click="()=>{
						$refs.degreePicker.open()
					}">
					<uv-picker ref="degreePicker" :columns="degreeList" @confirm="degreeChange" :defaultIndex="[3]"></uv-picker>
					<uv-input v-model="userForm.degree" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
						inputAlign="right">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item label="收入(年薪)" labelWidth="100" prop="userInfo.income" borderBottom @click="()=>{
						$refs.incomePicker.open()
					}">
					<uv-picker ref="incomePicker" :columns="incomeList" @confirm="incomeChange" :defaultIndex="[0]"></uv-picker>
					<uv-input v-model="userForm.income" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
						inputAlign="right">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item label="微信号" labelWidth="100" prop="userInfo.wechat_id" borderBottom>
					<uv-input placeholder="请输入微信号" v-model="userForm.wechat_id" border="none" inputAlign="right">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="性格" prop="userInfo.character" borderBottom>
					<uv-input v-model="userForm.character" border="none" inputAlign="right">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="爱好" prop="userInfo.hobby" borderBottom>
					<uv-input v-model="userForm.hobby" border="none" inputAlign="right">
					</uv-input>
				</uv-form-item>
				<view class="cu-bar bg-white" style="min-height: 50px;">
					<view>
						生活照片
					</view>
					<view class="action">
						{{userForm.photos.length}}/4
					</view>
				</view>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in userForm.photos" :key="index" @tap="ViewImage"
						:data-url="userForm.photos[index]">
						<image :src="userForm.photos[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="userForm.photos.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
				<view style="margin: 10px 0; color: #666;">
					<view>我的独白</view>
					<uv-textarea v-model="userForm.du_bai" border="bottom" :disabled="modalName!=null" maxlength="200"
						count></uv-textarea>
				</view>
				<view class="">
					<uv-text text="实名认证" bold size="18" margin="15px 0 "></uv-text>
					<view class="cu-bar bg-white">
						<view>
							身份信息
						</view>
						<view class="action">
							{{userForm.identity_photos.length}}/2
						</view>
					</view>
					<uv-text text="注：身份证/电子身份证（除年龄籍贯，其余地方可打码)" size="12" color="#e7090c" margin="10px 0"></uv-text>
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in userForm.identity_photos" :key="index" @tap="ViewIdentityImage" :data-url="userForm.identity_photos[index]">
							<image :src="userForm.identity_photos[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelIdentityImage" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseIdentityImage" v-if="userForm.identity_photos.length<2">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
					<uv-divider :dot="true"></uv-divider>
					<view class="cu-bar bg-white">
						<view>

							学历信息


						</view>

						<view class="action">
							{{userForm.degree_photos.length}}/1
						</view>
					</view>
					<uv-text text="注：学校毕业证/学信网截图（只需留下学校，其余可打码）" size="12" color="#e7090c" margin="10px 0"></uv-text>
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in userForm.degree_photos" :key="index" @tap="ViewDegreeImage" :data-url="userForm.degree_photos[index]">
							<image :src="userForm.degree_photos[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelDegreeImage" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseDegreeImage" v-if="userForm.degree_photos.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
					<uv-divider :dot="true"></uv-divider>
					<view class="cu-bar bg-white">
						<view>

							收入凭证


						</view>

						<view class="action">
							{{userForm.income_photos.length}}/1
						</view>
					</view>
					<uv-text text="注：工资到账截图/经营流水" size="12" color="#e7090c" margin="10px 0"></uv-text>
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in userForm.income_photos" :key="index" @tap="ViewIncomeImage" :data-url="userForm.income_photos[index]">
							<image :src="userForm.income_photos[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelIncomeImage" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseIncomeImage" v-if="userForm.income_photos.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>

				</view>


				<uv-button type="primary" text="对另一半期待" shape="circle" customStyle="margin-top: 10px"
					@click="toOtherExpect" color="linear-gradient(90deg, #fee3c8, #ffc38d)"></uv-button>
				<!-- <view class="cu-item" v-if="userForm.status == 2">
					<view class="content">
						<text class="cuIcon-title text-orange"></text>
						未通过原因: <text class="text-red padding-left">{{userForm.audit_expect}}</text>
					</view>
				</view> -->
			</uv-form>
		</view>


	</view>
</template>

<script>
	import Compressor from 'compressorjs';
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		profileInfo,
		editProfile
	} from '@/api/account';
	import {
		apiUrl
	} from '@/config/server.config';
	import {
		timeFormat
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	export default {
		components: {
			pickRegions
		},
		props: ['userForm'],
		data() {
			return {
				genderList: [['男', '女']],
				degreeList: [['小学', '初中', '高中', '大专', '本科', '硕士', '博士']],
				incomeList: [['5万以下', '5万-10万', '10万-15万', '15万-20万', '20万-30万', '30-40万', '40-50万', '50-100万', '100万以上']],
				modalName: null,
				dateValue: '2000-12-25',
				rules: {
					nick_name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					gender: {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					wechat_id: {
						type: 'string',
						required: true,
						message: '请填写微信号',
						trigger: ['blur', 'change']
					},
				}
			};
		},
		created() {
			this.userForm.regionName = this.userForm.region.join('，')
			this.dateValue = this.userForm.birthday
		},
		methods: {

			// 获取选择的地区
			handleGetRegion(region) {
				this.userForm.region = region.map(item => item.name)
				this.userForm.regionName =this.userForm.region.join('，')
				
			},
			ChooseAvatar() {
				console.log("上传头像")
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						//图片压缩
						new Compressor(res.tempFiles[0], {
							quality: 0.6, // 压缩质量
							convertSize: false,
							success: (result) => {
								//这里是Bold流转化为新的File
								const fileA = new File([result], result.name, {
									type: result.type
								})
								//这里写压缩后的主逻辑
								let fileUrl = window.URL.createObjectURL(fileA)
								uni.uploadFile({
									url: apiUrl + '/upload_file',
									filePath: fileUrl, // 要上传文件资源的路径
									name: 'file', // 文件对应的 key
									header: {
										'Authorization': uni.getStorageSync('token')
									},
									success: uploadRes => {
										// 处理上传成功的结果
										console.log('upload success:', uploadRes.data);
										var data = JSON.parse(uploadRes.data)
										this.userForm.avatar = data.file_name
										console.log(this.userForm.avatar)
									},
									fail: uploadError => {
										// 处理上传失败的错误
										console.error('upload error:', uploadError);
										uni.showToast({
											title: '照片上传失败',
											icon: 'none'
										});
									}
								})
							},
							error: (error) => {
								console.error('图片压缩失败', error);
							},
						});
					}
				});
			},


			PickerGender(e) {
				// 选择性别
				this.userForm.gender = e.value[0]

			},
			birthdayChange(e) {
				// 选择生日

				this.userForm.birthday = timeFormat(new Date(e.value).getTime(), 'yyyy-mm-dd')

				console.log(this.userForm.birthday)
			},
			// RegionChange(e) {
			// 	// 选择所在位置
			// 	this.region = e.detail.value
			// },
			degreeChange(e) {
				// 选择学历
				this.userForm.degree = e.value[0]
			},
			incomeChange(e) {
				// 选择年薪
				this.userForm.income = e.value[0]
			},

			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {


						for (var i = 0; i < res.tempFiles.length; i++) {
							//图片压缩
							new Compressor(res.tempFiles[i], {
								quality: 0.6, // 压缩质量
								convertSize: false,
								success: (result) => {
									//这里是Bold流转化为新的File
									const fileA = new File([result], result.name, {
										type: result.type
									})
									//这里写压缩后的主逻辑
									let fileUrl = window.URL.createObjectURL(fileA)
									uni.uploadFile({
										url: apiUrl + '/upload_file',
										filePath: fileUrl, // 要上传文件资源的路径
										name: 'file', // 文件对应的 key
										header: {
											'Authorization': uni.getStorageSync('token')
										},
										success: uploadRes => {
											// 处理上传成功的结果
											console.log('upload success:', uploadRes
												.data);
											var data = JSON.parse(uploadRes.data)
											this.userForm.photos.push(data.file_name)
										},
										fail: uploadError => {
											// 处理上传失败的错误
											console.error('upload error:',
												uploadError);
											uni.showToast({
												title: '照片上传失败',
												icon: 'none'
											});
										}
									})
								},
								error: (error) => {
									console.error('图片压缩失败', error);
								},
							});
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.userForm.photos,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '亲爱的用户',
					content: '确定要删除这张照片？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.userForm.photos.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},

			ChooseIdentityImage() {
				uni.chooseImage({
					count: 2, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
			
			
						for (var i = 0; i < res.tempFiles.length; i++) {
							//图片压缩
							new Compressor(res.tempFiles[i], {
								quality: 0.6, // 压缩质量
								convertSize: false,
								success: (result) => {
									//这里是Bold流转化为新的File
									const fileA = new File([result], result.name, {
										type: result.type
									})
									//这里写压缩后的主逻辑
									let fileUrl = window.URL.createObjectURL(fileA)
									uni.uploadFile({
										url: apiUrl + '/upload_file',
										filePath: fileUrl, // 要上传文件资源的路径
										name: 'file', // 文件对应的 key
										header: {
											'Authorization': uni.getStorageSync('token')
										},
										success: uploadRes => {
											// 处理上传成功的结果
											console.log('upload success:', uploadRes
												.data);
											var data = JSON.parse(uploadRes.data)
											this.userForm.identity_photos.push(data.file_name)
										},
										fail: uploadError => {
											// 处理上传失败的错误
											console.error('upload error:',
												uploadError);
											uni.showToast({
												title: '照片上传失败',
												icon: 'none'
											});
										}
									})
								},
								error: (error) => {
									console.error('图片压缩失败', error);
								},
							});
						}
					}
				});
			},
			ViewIdentityImage(e) {
				uni.previewImage({
					urls: this.userForm.identity_photos,
					current: e.currentTarget.dataset.url
				});
			},
			DelIdentityImage(e) {
				uni.showModal({
					title: '亲爱的用户',
					content: '确定要删除这张照片？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.userForm.identity_photos.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseDegreeImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
			
			
						for (var i = 0; i < res.tempFiles.length; i++) {
							//图片压缩
							new Compressor(res.tempFiles[i], {
								quality: 0.6, // 压缩质量
								convertSize: false,
								success: (result) => {
									//这里是Bold流转化为新的File
									const fileA = new File([result], result.name, {
										type: result.type
									})
									//这里写压缩后的主逻辑
									let fileUrl = window.URL.createObjectURL(fileA)
									uni.uploadFile({
										url: apiUrl + '/upload_file',
										filePath: fileUrl, // 要上传文件资源的路径
										name: 'file', // 文件对应的 key
										header: {
											'Authorization': uni.getStorageSync('token')
										},
										success: uploadRes => {
											// 处理上传成功的结果
											console.log('upload success:', uploadRes
												.data);
											var data = JSON.parse(uploadRes.data)
											this.userForm.degree_photos.push(data.file_name)
										},
										fail: uploadError => {
											// 处理上传失败的错误
											console.error('upload error:',
												uploadError);
											uni.showToast({
												title: '照片上传失败',
												icon: 'none'
											});
										}
									})
								},
								error: (error) => {
									console.error('图片压缩失败', error);
								},
							});
						}
					}
				});
			},
			ViewDegreeImage(e) {
				uni.previewImage({
					urls: this.userForm.degree_photos,
					current: e.currentTarget.dataset.url
				});
			},
			DelDegreeImage(e) {
				uni.showModal({
					title: '亲爱的用户',
					content: '确定要删除这张照片？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.userForm.degree_photos.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseIncomeImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
			
			
						for (var i = 0; i < res.tempFiles.length; i++) {
							//图片压缩
							new Compressor(res.tempFiles[i], {
								quality: 0.6, // 压缩质量
								convertSize: false,
								success: (result) => {
									//这里是Bold流转化为新的File
									const fileA = new File([result], result.name, {
										type: result.type
									})
									//这里写压缩后的主逻辑
									let fileUrl = window.URL.createObjectURL(fileA)
									uni.uploadFile({
										url: apiUrl + '/upload_file',
										filePath: fileUrl, // 要上传文件资源的路径
										name: 'file', // 文件对应的 key
										header: {
											'Authorization': uni.getStorageSync('token')
										},
										success: uploadRes => {
											// 处理上传成功的结果
											console.log('upload success:', uploadRes
												.data);
											var data = JSON.parse(uploadRes.data)
											this.userForm.income_photos.push(data.file_name)
										},
										fail: uploadError => {
											// 处理上传失败的错误
											console.error('upload error:',
												uploadError);
											uni.showToast({
												title: '照片上传失败',
												icon: 'none'
											});
										}
									})
								},
								error: (error) => {
									console.error('图片压缩失败', error);
								},
							});
						}
					}
				});
			},
			ViewIncomeImage(e) {
				uni.previewImage({
					urls: this.userForm.income_photos,
					current: e.currentTarget.dataset.url
				});
			},
			DelIncomeImage(e) {
				uni.showModal({
					title: '亲爱的用户',
					content: '确定要删除这张照片？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.userForm.income_photos.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			toOtherExpect() {
				// console.log(this.userForm)
				this.$emit('getCurrent', 1)
				return
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editInfo {
		background-color: #fff;

		.editInfo-form {
			// border-radius: 20px;
			padding: 10px 20px;

			::v-deep .uv-form-item__body__right__content__slot {
				justify-content: flex-end;
			}

			::v-deep .uv-form-item__body__left__content__label {
				color: #666;
					font-size: 14px;
			}

			::v-deep .uv-form-item__body__right__message {
				text-align: right;
			}

			::v-deep .uv-divider {
				margin: 5px 0;
			}

			.avatar-button {}

			.avatar-button button {
				width: 100%;
				height: 100%;
				border-radius: inherit;
				background-position: center;
				background-size: cover;
				outline: none;
				/* 去除焦点边框 */
			}
		}
	}

	.bg-white {
		min-height: 20px;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>